<template>
 计数器  {{ count }} | {{ $store.state.count }}
<hr></hr>
  double: {{ doubleCount }} | {{ $store.getters.doubleCount }}
  <button @click="$store.state.count++">增加</button>
  <button @click="incrementAction">异步增加</button>
  <button @click="increment">同步增加</button>
  <hr></hr>
  aCount: {{ aCount }} 
  bCount: {{ bCount }}
  cCount: {{ cCount }}
  <button @click="$store.commit('aCount/increment', 10)">aCount 同步增加</button>
  <button @click="$store.commit('bCount/increment', 10)">bCount 同步增加</button>
  <button @click="$store.commit('aCount/cCount/increment', 10)">cCount 同步增加</button>
</template>

<script>
import { computed } from "vue";
import { useStore } from "@/vuex";

export default {
  name: "App",
  
  setup() {
    const store = useStore();
    console.log(store);
    function increment() {
      store.commit('increment', 10)
    }
    async function incrementAction() {
      let res = await store.dispatch('incrementAction', 10)
   console.log(res);
   
    }
    return {
      count: computed(() => store.state.count),
      doubleCount: computed(() => store.getters.doubleCount),
      aCount: computed(() => store.state.aCount.count),
      bCount: computed(() => store.state.bCount.count),
      cCount: computed(() => store.state.aCount.cCount.count),
      increment,
      incrementAction,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
